<template>
	<view class="figure-profile flex--row" @click="$emit('click')">
		<view class="figure-profile--side flex--row">
			<view class="profile-avatar">
				<image aria-label="用户头像" :src="item.avatar"  mode="aspectFit"></image>
			</view>
			<view class="profile-text">
				<view class="profile-text--desc">
					<text class="text--main-dark">{{item.name}}</text>
					<text class="text--sub-grey">{{distance}}</text>
				</view>
				<view class="profile-text--route">
					<text class="text_time text--main-grey">{{ statusData.statusText}}</text>
				</view>
			</view>
		</view>
		<image :aria-label="statusData.buttonLabel"  :src="statusData.statusIcon" mode="aspectFit" @click.stop="handleClick" class="icon"></image>
	</view>
</template>

<script>
	/**
	 * ServiceStatus:
	 * 			0 未请求 -					    盲人: 请求志愿者				
	 * 			1 未处理 - 志愿者：查看路线信息   盲人:  取消请求
	 * 			2 已拒绝 - 志愿者：删除          盲人:  删除
	 * 			3 已接收 - 志愿者：发信息        盲人:  无
	 * 			4 其他志愿者接受 - 志愿者：删除   盲人: 
	 * 			5 残疾人取消 - 志愿者：删除      盲人:  
	 */
	import {ROLE_VOLUNTEER,ROLE_BLIND,ROLE_UNDEFINED} from "@/core/constant/role.js"
	import { checkRole } from "@/core/app"
	import * as Service from "@/core/constant/service.js"
	const blindStatus2Icon = ["../../static/assist/plus.svg","../../static/assist/minus.svg","../../static/assist/minus.svg",""] 
	const volunteerStatus2Icon = ['',"../../static/assist/personInfo.svg",
									"../../static/assist/minus.svg",
									"",
									"../../static/assist/minus.svg",
									"../../static/assist/minus.svg"]
	export default{
		emits:['click','requestVolunteer','checkRequest','deleteRequest','cancelRequest'],
		props:{
			item:{
				type:Object,
				required:true
				},
			blindStatus:{
				type:Number,
				default:-1
			}
			
			},
		data(){
			return {
				status2Icon:[],
				role:ROLE_UNDEFINED,
				Service,
			}
		},
		computed:{
			statusData(){
				let statusText = ""
				let statusIcon = ""
				let buttonLabel = "志愿者端没有无障碍标签"
				if(this.role === ROLE_VOLUNTEER){
					statusIcon = volunteerStatus2Icon[this.item.status]
					switch(this.item.status){
						case Service.SERVICE_REQUESTING:
							statusText = ""
							break
						case Service.SERVICE_ACCEPTED:
							statusText = "出行已成功预约"
							break
						case Service.SERVICE_REJECTED:
							statusText = "您已拒绝该出行"
							break
						case Service.SERVICE_MISSED:
							statusText = "该出行被其他志愿者接受"
							break
						case Service.SERVICE_CANCELED:
							statusText =  "对方取消了该请求"
							break
						default:
							statusText = "服务状态错误"
					}
				
				}else if(this.role === ROLE_BLIND){
					statusIcon = blindStatus2Icon[this.blindStatus]
					switch(this.blindStatus){
						case Service.SERVICE_AVAILABLE:
							statusText = ""
							buttonLabel = "请求志愿者"
							break
						case Service.SERVICE_REQUESTING:
							statusText = "正在请求中"
							buttonLabel = "取消请求志愿者"
							break
						case Service.SERVICE_ACCEPTED:
							statusText = "出行已成功预约"
							break
						case Service.SERVICE_REJECTED:
							statusText = `对方已拒绝该出行:${this.item.refuseReason}`
							break
						case Service.SERVICE_CANCELED:
							statusText =  "您取消了该请求"
							break
						default:
							statusText = "服务状态错误"
					}
				}
				
				return {
					statusText,
					statusIcon,
					buttonLabel
					}
			},
			distance(){
				return `${this.item.distance.toFixed(0)}km`
			}
		},
		methods:{
			handleClick(){
				if(this.role === ROLE_VOLUNTEER){
					this.handleVolunteerClick()
				}else{
					this.handleBlindClick()
				}
			},
			handleBlindClick(){
				switch(this.blindStatus){
					case Service.SERVICE_AVAILABLE:
						this.$emit("requestVolunteer")
						console.log("盲人端：请求志愿者")
						break
					case Service.SERVICE_REQUESTING:
						this.$emit('cancelRequest')
						console.log("盲人端：取消请求志愿者")
						break
					case Service.SERVICE_ACCEPTED:
						break
					case Service.SERVICE_REJECTED:
						console.log("盲人端：删除记录")
						break
					default:
						break
				}
			},
			handleVolunteerClick(){
				switch(this.item.status){
					case Service.SERVICE_REQUESTING:
						this.$emit("checkRequest")
						console.log("查看路线请求信息")
						break
					case Service.SERVICE_ACCEPTED:
						break
					case Service.SERVICE_MISSED:
					case Service.SERVICE_CANCELED:
					case Service.SERVICE_REJECTED:
						this.$emit("deleteRequest")
						break
					default:
						this.$toast("服务状态错误！")
						
				}
			}
		}
		,
		mounted(){
			this.role = checkRole()
		}
	}
</script>

<style lang="scss">
	
	.text--sub-grey{
		font-size:14px;
		color:#777;	
	}
	
	.text--main-dark{
		font-size:16px;
		color:#333;
		font-weight: 700;
	}
	
	
	.text--main-grey{
		font-size:16px;
		color:#777;
	}
	
	.figure-profile{
		justify-content: space-between;
		align-items: center;
		margin-bottom: 6px;
		&--side{
			align-items: center;
			gap:12px;
		}
		
	}
	
	.profile-avatar{
		border-radius: 50%;
		overflow: hidden;
		height:48px;
		width:48px;
		
		image{
			width:100%;
			height: 100%;
		}
	}
	
	.profile-text{
		& &--desc{
			margin-bottom: 6px;
		}
		
		& text {
			margin-right:6px;
		}
		
		& text:last-child{
			margin-right: 0px;
		}
	}
				
</style>